<template>
	<view class="custom">
		<view class="top"><view class="top-c"></view></view>
		<view @touchstart="fingerstart" @touchend="fingerend">
			<view class="top-box">
				<view class="left-box">{{customObj.vehicleNum}}</view>
				<view class="right-box">
					<image src="../../static/icon1.png" class="icon" @click="hanlleMethods('freshen')"></image>
					<image src="../../static/icon8.png" class="icon" style="margin-right: 0;" @click="hanlleMethods('close')"></image>
				</view>
			</view>
			<view class="signal">
				<view class="sigal-item">
					<image src="../../static/icon5.png" mode="aspectFill" style="width: 30rpx;height: 32rpx"></image>
					<view>{{customObj.gnssCount||'0'}}</view>
				</view>
				<view class="sigal-item">
					<image src="../../static/icon6.png" mode="aspectFill" style="width: 28rpx;height: 32rpx"></image>
					<view>{{customObj.signalStrength||'0'}}</view>
				</view>
				<view class="sigal-item">
					<image src="../../static/icon7.png" mode="aspectFill" style="width: 34rpx;height: 34rpx;"></image>
					<view>{{customObj.directionName}}</view>
				</view>
			</view>
			<view class="module">
				<view class="module-item" style="background: #FBAA37;">
					<view class="module-item-t">{{customObj.speed}}</view>
					<view>行驶速度</view>
				</view>
<!-- 				<view class="module-item" style="background: #B2B5B7;">
					<view class="module-item-t">{{customObj.runStopTime}}</view>
					<view>行停时间</view>
				</view> -->
				<view class="module-item" style="background: #74AFF0;">
					<view class="module-item-t">{{customObj.mileage}}</view>
					<view>今日里程</view>
				</view>
				<view class="module-item" style="background: #5EC8BA;">
					<view class="module-item-t">{{customObj.mileageTotal}}</view>
					<view>总里程</view>
				</view>
			</view>
			<view class="metods">
				<view
					v-for="(item, index) in lists"
					:key="index"
					class="methods-item"
					@click="handleItemClick(index)"
				>{{item}}</view>
			</view>
		</view>
		<view :scroll-y="true" class="msg">
			<view class="msg-item">
				<view class="item-l">定位时间:</view>
				<view class="item-r">{{customObj.time}}</view>
			</view>
			<view class="msg-item">
				<view class="item-l">所属车队:</view>
				<view class="item-r">{{customObj.teamName}}</view>
			</view>
			<view class="msg-item">
				<view class="item-l">ACC状态:</view>
				<view class="item-r">{{customObj.acc}}</view>
			</view>
			<view class="msg-item">
				<view class="item-l">在线状态:</view>
				<view class="item-r">{{customObj.onlineStatus}}</view>
			</view>
<!-- 			<view class="msg-item msg-height">
				<view class="item-l">地理位置:</view>
				<view class="item-r">{{customObj.addr}}</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import utils from "@/utils/utils.js"
	var clientY = 0
	export default{
		props: {
			customObj: Object,
			customHeight: {
				type: Number,
				default: 700
			}
		},
		data() {
			return {
				lists: ['轨迹', '视频', '录像', '导航']
			}
		},
		methods: {
			hanlleMethods(str) {
				this.$emit('onCustomMethods', str)
			},
			handleItemClick(index) {
				console.log("handleItemClick",index)
				if(index == 0) {
					uni.navigateTo({
						url: '/pages/vehicle/track/index?isClear=1'
					})
				}else if(index == 1){
					var obj = {
						vehicleId: this.customObj.id,
						vehicleNum: this.customObj.vehicleNum,
					}
					uni.navigateTo({
						url: '/pages/vehicle/video/realTimeDetail?' + utils.KeyValueToUrl(obj)
					})
				}else if(index == 2){
					uni.navigateTo({
						url: '/pages/vehicle/video/history?isClear=1'
					})
				}else if(index == 3){
					uni.openLocation({
						latitude: this.customObj.latitude*1,//要去的纬度-地址       
						longitude: this.customObj.longitude*1,//要去的经度-地址
						success: function () {
							console.log('导航成功');
						},
						fail:function(error){
							console.log(error)
						}
				   });
				}
			},
			fingerstart(e) {
				clientY = e.changedTouches[0].clientY;
			},
			fingerend(e) {
				const subY = e.changedTouches[0].clientY - clientY;
				if (subY > 50) {
					this.$parent.customHeight = 420
				} else if (subY < -50) {
					this.$parent.customHeight = this.customHeight
				}
			},
		}
	}
</script>

<style scoped>
	.custom{
		height: 100%;
		padding: 6rpx 24rpx 24rpx 24rpx;
	}
	.top{
		display: flex;
		justify-content: center;
	}
	.top-c{
		width: 120rpx;
		height: 8rpx;
		border-radius: 20rpx;
		background-color: #E0E0E0;
	}
	.top-box{
		padding-top: 4rpx;
		color: #FEFEFE;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.left-box{
		/* width: 160rpx; */
		height: 54rpx;
		background: #FFC950;
		border: 1px solid #333333;
		opacity: 0.95;
		color: #000000;
		font-size: 28rpx;
		text-align: center;
		line-height: 54rpx;
		padding: 0 15rpx;
		border-radius: 5rpx;
	}
	.right-box{
		display: flex;
		align-items: center;
	}
	.icon{
		width: 38rpx;
		height: 38rpx;
		margin-right: 36rpx;
	}
	.msg{
		height: 260rpx;
		overflow-y: auto;
		font-size: 24rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
		background: #F2F9FF;
		border-bottom: 1px solid #E4E4E4;
	}
	.msg-height view{
		line-height: 48rpx;
	}
	.msg-item{
		padding-top: 10rpx;
		display: flex;
	}
	.item-l{
		white-space: nowrap;
		padding-right: 10rpx;
		height: 40rpx;
	}
	.item-r{
		width: 0;
		flex: 1;
		color: #666666;
		white-space: break-spaces;
	}
	.signal{
		display: flex;
		font-size: 24rpx;
		margin-top: 8rpx;
	}
	.sigal-item{
		padding: 0 15rpx;
		height: 44rpx;
		background: #E1F2FF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 8rpx;
	}
	.sigal-item image{
		margin-right: 10rpx;
	}
	.module{
		display: flex;
		justify-content: space-between;
		margin-top: 8rpx;
	}
	.module-item{
		width: 227rpx;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 24rpx;
	}
	.module-item-t{
		white-space: nowrap;
		margin-bottom: 12rpx;
	}
	.metods{
		height: 80rpx;
		color: #333333;
		font-size: 28rpx;
		background: #F2F9FF;
		display: flex;
		align-items: center;
		margin: 8rpx 0;
	}
	.methods-item{
		flex: 1;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		border-right: 1px solid #3791E9;
	}
	.methods-item:last-child{
		border-right: none;
	}
</style>
